{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}Welcome | {% endblock %}

<style>
{% block style %}

.jumbotron {
	background-image: url("http://www.transparenttextures.com/patterns/batthern.png");
	background-color: #005880;
}

.jumbotron h1, .lead-jumbtron {
	color: #fff;
}





.panel {
	margin-top: 20px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    /*margin-top: 120px;*/
  }
}



{% endblock %}
</style>


{% block jumbotron %}
<div class='container-fluid'>

<div class="jumbotron">
<div class='container'>
<div class='row'>

<div class='col-sm-7'>
	
<h1>Welcome</h1>
<p class='lead-jumbtron'>This is our site.</p>

</div>
<div class='col-sm-5'>

	<div role="tabpanel">

	  <!-- Nav tabs -->
	  <ul class="nav nav-tabs nav-tabs-jumbotron" role="tablist">
	    <li role="presentation" class="active">
	    	<a href="#register" aria-controls="register" role="tab" data-toggle="tab">Register</a></li>
	    <li role="presentation">
	    	<a href="#login" aria-controls="login" role="tab" data-toggle="tab">Login</a></li>
	  </ul>

	  <!-- Tab panes -->
	  <div class="tab-content">
	    <div role="tabpanel" class="tab-pane active" id="register">

	    <div class="panel panel-jumbotron panel-default">
  <div class="panel-body">
    <form method='POST' action='{% url "register" %}'>{% csrf_token %}
					{{ register_form|crispy}}
					<input class='btn btn-default btn-block btn-lg' type='submit' value='Register'/>
					</form>
					<br/>
					<p>By registering you agree to our <a href='#'>terms</a></p>
  </div>
</div>
					


	    </div>
	    <div role="tabpanel" class="tab-pane" id="login">
				<div class="panel panel-jumbotron panel-default">
				<div class="panel-body">
				<form method='POST' action='{% url "login" %}'>{% csrf_token %}
				{{ login_form|crispy }}
				<input class='btn btn-default btn-block' type='submit' value='Login'/>
				</form>

				</div>
				</div>
	    </div>
	  </div>

	</div>

</div>

</div>
</div>

</div>
</div>
{% endblock %}



{% block content %}


<!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

      <!-- Three columns of text below the carousel -->
      <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="" alt="Generic placeholder image" style="width: 140px; height: 140px;">
          <h2>Latest Technology</h2>
          <p>Django, bootstrap and more.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="" alt="Generic placeholder image" style="width: 140px; height: 140px;">
          <h2>Latest Technology</h2>
          <p>Django, bootstrap and more.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="" alt="Generic placeholder image" style="width: 140px; height: 140px;">
          <h2>Latest Technology</h2>
          <p>Django, bootstrap and more.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        
      </div><!-- /.row -->


      <!-- START THE FEATURETTES -->

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-sm-7">
          <h2 class="featurette-heading">The best content in the world. <span class="text-muted">It'll blow your mind.</span></h2>

        </div>
        <div class="col-sm-5">
          {% if featured_categories %}
					
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					  <!-- Indicators -->
					  <ol class="carousel-indicators">
					  {% for cat in featured_categories %}
					    <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.count }}" class="{% if forloop.first %} active {% endif %}"></li>
					    {% endfor %}
					  </ol>

					  <!-- Wrapper for slides -->
					 

					  <div class="carousel-inner" role="listbox">
					   {% for cat in featured_categories %}
					    <div class="item {% if forloop.first %} active {% endif %}">
					    <a href="{{ cat.get_absolute_url }}">
					      <img src="{{ cat.get_image_url }}" class='img-responsive'>
					      </a>
					      <!-- <div class="carousel-caption">
					        <a href="{{ cat.get_absolute_url }}">{{ cat.title }}</a>
					      </div> -->
					    </div>
					    {% endfor %}
					  </div>

					  <!-- Controls -->
					  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					    <span class="sr-only">Previous</span>
					  </a>
					  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					    <span class="sr-only">Next</span>
					  </a>
					</div>
			






				{% endif %}
        </div>
      </div>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-sm-5">
         
				{% if featured_videos %}


				<div class="panel panel-default">
				   <div class="panel-heading">
			    <h3 class="panel-title">Featured Videos</h3>
			  </div>
				    <table class='table'>
				{% for vid in featured_videos %}
				<tr><td><a href="{{ vid.get_absolute_url }}">{{ vid.title }}</a> {% if vid.free_preview %}Free Preview{% endif %}</td></tr>
				{% endfor %}
				  
				  </table>
				</div>



				{% endif %}
        </div>
        <div class="col-sm-7">
          <h2 class="featurette-heading">Videos available all day long <span class="text-muted">See for yourself.</span></h2>
        </div>
      </div>

      </div>

    

      <hr class="featurette-divider">

      <!-- /END THE FEATURETTES -->










{% endblock %}